<template>
  <view class="address-page">
    <!-- 乡村风格背景 -->
    <view class="village-bg"></view>
    
    <!-- 顶部导航 -->
    <view class="nav-bar">
   <!--   <view class="nav-back" @click="goBack">
      </view> -->
      <text class="nav-title">地址管理</text>
      <view class="nav-add" @click="showAddDialog">
        <uni-icons type="plus" size="24" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 地址列表 -->
    <scroll-view class="address-list" scroll-y>
      <!-- 空状态 -->
      <view class="empty-state" v-if="addressList.length === 0">
        <image src="/static/empty-address.png" mode="aspectFit"></image>
        <text class="empty-text">暂无收货地址</text>
        <button class="empty-btn" @click="showAddDialog">添加地址</button>
      </view>
      
      <!-- 地址卡片 -->
      <view 
        class="address-card" 
        v-for="(item, index) in addressList" 
        :key="index"
        :style="{'animation-delay': `${index * 0.1}s`}"
        @click="editAddress(index)"
      >
        <view class="card-content">
          <view class="address-header">
            <text class="address-name">{{item.name}}</text>
            <text class="address-phone">{{item.phone}}</text>
            <view class="address-tag" v-if="index === 0">
              <text>默认</text>
            </view>
          </view>
          <text class="address-detail">{{item.address}}</text>
        </view>
        <view class="card-actions">
          <button class="action-btn edit" @click.stop="editAddress(index)">
            <uni-icons type="compose" size="24" color="#4a90e2"></uni-icons>
          </button>
          <button class="action-btn delete" @click.stop="showDeleteConfirm(index)">
            <uni-icons type="trash" size="24" color="#FF5722"></uni-icons>
          </button>
        </view>
      </view>
    </scroll-view>
    
    <!-- 添加地址按钮 -->
    <view class="add-btn-container" v-if="addressList.length > 0">
      <button class="add-btn" @click="showAddDialog">
        <uni-icons type="plus" size="28" color="#fff"></uni-icons>
        <text>添加新地址</text>
      </button>
    </view>
    
    <!-- 添加/编辑地址弹窗 -->
    <uni-popup ref="addressDialog" type="bottom" :mask-click="false">
      <view class="address-dialog">
        <view class="dialog-header">
          <text class="dialog-title">{{isEdit ? '编辑地址' : '添加地址'}}</text>
          <uni-icons type="close" size="28" color="#999" @click="closeDialog"></uni-icons>
        </view>
        <view class="dialog-body">
          <view class="form-item">
            <text class="form-label">收货人</text>
            <input class="form-input" v-model="currentAddress.name" placeholder="请输入收货人姓名" />
          </view>
          <view class="form-item">
            <text class="form-label">联系电话</text>
            <input class="form-input" v-model="currentAddress.phone" placeholder="请输入联系电话" type="number" />
          </view>
          <view class="form-item">
            <text class="form-label">详细地址</text>
            <textarea class="form-textarea" v-model="currentAddress.address" placeholder="请输入详细地址"></textarea>
          </view>
        </view>
        <view class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeDialog">取消</button>
          <button class="dialog-btn confirm" @click="saveAddress">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [],
      currentAddress: {
        name: '',
        phone: '',
        address: ''
      },
      currentIndex: -1,
      isEdit: false
    }
  },
  onShow() {
    this.loadAddressList()
  },
  methods: {
    // 加载地址列表
    loadAddressList() {
      try {
        const cacheData = uni.getStorageSync('recipients')
        if (cacheData && cacheData.data && Array.isArray(cacheData.data)) {
          this.addressList = cacheData.data
        } else {
          // 如果缓存数据格式不正确，初始化为空数组
          this.addressList = []
          // 同时修正缓存数据
          uni.setStorageSync('recipients', {
            type: 'object',
            data: []
          })
        }
      } catch (e) {
        console.error('读取地址缓存失败:', e)
        this.addressList = []
      }
    },
    
    // 保存地址列表到缓存
    saveAddressList() {
      try {
        const cacheData = {
          type: 'object',
          data: this.addressList
        }
        uni.setStorageSync('recipients', cacheData)
      } catch (e) {
        console.error('保存地址缓存失败:', e)
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 显示添加地址弹窗
    showAddDialog() {
      this.currentAddress = { 
        name: '', 
        phone: '', 
        address: '' 
      }
      this.currentIndex = -1
      this.isEdit = false
      this.$refs.addressDialog.open()
    },
    
    // 编辑地址
    editAddress(index) {
      if (index >= 0 && index < this.addressList.length) {
        this.currentAddress = JSON.parse(JSON.stringify(this.addressList[index]))
        this.currentIndex = index
        this.isEdit = true
        this.$refs.addressDialog.open()
      } else {
        uni.showToast({
          title: '地址信息错误',
          icon: 'none'
        })
      }
    },
    
    // 显示删除确认
    showDeleteConfirm(index) {
      if (index >= 0 && index < this.addressList.length) {
        uni.showModal({
          title: '提示',
          content: '确定要删除这个地址吗？',
          success: (res) => {
            if (res.confirm) {
              this.deleteAddress(index)
            }
          }
        })
      } else {
        uni.showToast({
          title: '地址信息错误',
          icon: 'none'
        })
      }
    },
    
    // 删除地址
    deleteAddress(index) {
      if (index >= 0 && index < this.addressList.length) {
        this.addressList.splice(index, 1)
        this.saveAddressList()
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        // 重新加载确保数据同步
        this.loadAddressList()
      } else {
        uni.showToast({
          title: '删除失败，地址不存在',
          icon: 'none'
        })
      }
    },
    
    // 保存地址
    saveAddress() {
      // 验证输入
      if (!this.currentAddress.name || this.currentAddress.name.trim() === '') {
        uni.showToast({
          title: '请输入收货人姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.currentAddress.phone || !/^1[3-9]\d{9}$/.test(this.currentAddress.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      if (!this.currentAddress.address || this.currentAddress.address.trim() === '') {
        uni.showToast({
          title: '请输入详细地址',
          icon: 'none'
        })
        return
      }
      
      // 处理数据
      const newAddress = {
        name: this.currentAddress.name.trim(),
        phone: this.currentAddress.phone.trim(),
        address: this.currentAddress.address.trim()
      }
      
      if (this.isEdit) {
        // 编辑现有地址
        if (this.currentIndex >= 0 && this.currentIndex < this.addressList.length) {
          this.addressList.splice(this.currentIndex, 1, newAddress)
        } else {
          uni.showToast({
            title: '编辑失败，地址不存在',
            icon: 'none'
          })
          return
        }
      } else {
        // 添加新地址
        this.addressList.unshift(newAddress)
      }
      
      // 保存并关闭
      this.saveAddressList()
      this.$refs.addressDialog.close()
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
      // 重新加载确保数据同步
      this.loadAddressList()
    },
    
    // 关闭弹窗
    closeDialog() {
      this.$refs.addressDialog.close()
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.address-page {
  position: relative;
  min-height: 100vh;
  background-color: #f8f9fa;
  overflow: hidden;
}

/* 乡村风格背景 */
.village-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(135deg, rgba(139, 195, 74, 0.1) 0%, transparent 50%),
    linear-gradient(45deg, rgba(255, 193, 7, 0.1) 0%, transparent 50%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,50 Q50,20 80,50" stroke="rgba(139, 195, 74, 0.1)" stroke-width="2" fill="none"/></svg>');
  background-size: cover;
  z-index: 0;
}

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
  z-index: 1;
  
  .nav-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.8);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s;
    
    &:active {
      background: rgba(74, 144, 226, 1);
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .nav-add {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.8);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s;
    
    &:active {
      background: rgba(74, 144, 226, 1);
    }
  }
}

/* 地址列表 */
.address-list {
  height: calc(100vh - 120rpx);
  padding: 20rpx;
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100rpx 0;
    animation: fadeIn 0.5s ease-out;
    
    image {
      width: 300rpx;
      height: 300rpx;
      margin-bottom: 30rpx;
      opacity: 0.8;
      filter: drop-shadow(0 4rpx 10rpx rgba(0, 0, 0, 0.1));
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 40rpx;
    }
    
    .empty-btn {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 60rpx;
      background: linear-gradient(135deg, #4a90e2, #5aa1ff);
      color: #fff;
      font-size: 30rpx;
      border-radius: 40rpx;
      border: none;
      box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.3);
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 4rpx 15rpx rgba(74, 144, 226, 0.3);
      }
    }
  }
  
  .address-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
    
    .card-content {
      flex: 1;
      
      .address-header {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .address-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-right: 20rpx;
        }
        
        .address-phone {
          font-size: 28rpx;
          color: #666;
          margin-right: 20rpx;
        }
        
        .address-tag {
          background: rgba(255, 152, 0, 0.1);
          color: #FF9800;
          font-size: 22rpx;
          padding: 3rpx 15rpx;
          border-radius: 20rpx;
        }
      }
      
      .address-detail {
        display: block;
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
      }
    }
    
    .card-actions {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
      
      .action-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15rpx;
        transition: all 0.3s;
        
        &:active {
          transform: scale(0.9);
        }
        
        &.edit {
          background: rgba(74, 144, 226, 0.1);
        }
        
        &.delete {
          background: rgba(255, 87, 34, 0.1);
        }
      }
    }
  }
}

/* 添加地址按钮 */
.add-btn-container {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  right: 0;
  padding: 0 30rpx;
  z-index: 10;
  
  .add-btn {
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(135deg, #4a90e2, #5aa1ff);
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    border: none;
    box-shadow: 0 8rpx 30rpx rgba(74, 144, 226, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    
    uni-icons {
      margin-right: 10rpx;
    }
    
    &:active {
      transform: scale(0.95);
      box-shadow: 0 6rpx 25rpx rgba(74, 144, 226, 0.3);
    }
  }
}

/* 地址弹窗 */
.address-dialog {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 30rpx;
  animation: slideUp 0.3s ease-out;
  
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .dialog-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    uni-icons {
      padding: 10rpx;
    }
  }
  
  .dialog-body {
    .form-item {
      margin-bottom: 30rpx;
      
      .form-label {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 15rpx;
      }
      
      .form-input {
        height: 80rpx;
        width: 100%;
        padding: 0 20rpx;
        background: #f5f5f5;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #333;
        transition: all 0.3s;
        
        &:focus {
          background: rgba(74, 144, 226, 0.1);
        }
      }
      
      .form-textarea {
        width: 100%;
        height: 160rpx;
        padding: 20rpx;
        background: #f5f5f5;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #333;
        transition: all 0.3s;
        
        &:focus {
          background: rgba(74, 144, 226, 0.1);
        }
      }
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    
    .dialog-btn {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      border-radius: 45rpx;
      border: none;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.95);
      }
      
      &.cancel {
        background: #f5f5f5;
        color: #666;
        margin-right: 20rpx;
      }
      
      &.confirm {
        background: linear-gradient(135deg, #4a90e2, #5aa1ff);
        color: #fff;
        box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.3);
      }
    }
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style>